<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件冒泡</title>
</head>
<body>
<!--事件的冒泡（Bubble）：-->
<!--所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，-->
<!--其祖先元素的相同事件也会被触发，在开发中大部分情况冒泡都是有用的，-->
<!--如果不希望发生事件冒泡可以通过事件对象来取消冒泡。-->

<div id="div1" style="width: 200px; height: 200px; background: pink;">
    我是DIV1
    <div id="div2" style="width: 100px; height: 100px; background: yellow;">
        我是DIV2
    </div>
</div>

<div id="div3" style="width: 200px; height: 200px; background: lightblue;">
    我是DIV3
    <div id="div4" style="width: 100px; height: 100px; background: lightgreen;">
        我是DIV4
    </div>
</div>

<script>
    const div1 = document.getElementById("div1");
    const div2 = document.getElementById("div2");

    // 为div1绑定单击事件
    div1.onclick = function () {
        console.log("div1 的单击事件触发了！");
    };

    // 为div2绑定单击事件
    div2.onclick = function () {
        console.log("div2 的单击事件触发了！");
    };

    // 阻止冒泡演示
    const div3 = document.getElementById("div3");
    const div4 = document.getElementById("div4");

    div3.onclick = function () {
        console.log("div3 的单击事件触发了！");
    };

    div4.onclick = function (event) {
        console.log("div4 的单击事件触发了！");
        event.stopPropagation(); // 阻止事件冒泡
    };
</script>
</body>
</html>
